<! doctype html>
<html>
	<head>
		<meta charset = "UTF-8" >
		<meta name = "viewport" content = "width=device-width initial-scale=1.0">
		<title>
			ShaderLab Mitsunoryw
		</title>
	</head>
	<style>
		body{
			background-color: rgb(35,35,35); margin: 0px;
		}
		.header-bar{
			background-color: rgba(0,0,0,0.8); display: block; height: 50px; display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			position: sticky;
			position: -webkit-sticky;
			top: 0px;
			z-index: 3;
		}
		.logo{
			font-size: 30; color: rgb(255,255,255); font-weight: 200; padding: 15px 15px 0px 15px;
		}
		.button{
			background-color: rgba(0,0,0,0.5);
		}
		.canvas{
			padding: 10px; position: relative; 
		}
		textarea{
			width: 100%; border: none; font-size: 20;
		}
		button {
			border: none; font-size: 20; color: rgb(120,120,120); padding: 20px 15px 0px 15px; background-color: rgba(0,0,0,0.8); display: block; margin = 0;
		}
		#on_canvas{
			color: rgb(255,255,255); z-index: 2; position: absolute; bottom: 20px; padding: 0px 10px 10px 10px; word-wrap:break-word; word-break:break-all;
		}
		.mainCanvas{
			z-index: 1; width: 100%;
		}
		#codeArea{
			display: block; padding: 10px 0px 10px 0px;
		}
		#bottomButton{
			position: sticky; position: -webkit-sticky; bottom: 0px; margin-top: 10px;
		}
		@media screen and (orientation: landscape){
			body{
			}
			.content{
				display: flex;
				display: -webkit-flex;
				align-items: stretch;
			}
		}
	</style>
	<body onload = "initGl();">
		<div class = "header-bar">
			<div class = "logo">
				Shader Lab
			</div>
			<div class = "button">
				<button id = "menuBitton">
				MENU
				</button>
			</div>
		</div>
		<div class = "content">
			<div class = "canvas">
				<div id = "on_canvas">
					on_canvas
				</div>
				<canvas id = "mainCanvas"></canvas>
			</div>
			<div id = "codeArea">
				<div id = "textArea">
					<textarea id = "shaderSource">
					vec4 line_color = vec4(0.0,0.0,0.0,1.0);
vec4 surface_color = vec4(1.0,1.0,1.0,1.0);
vec4 background_color = vec4(0.2,0.2,0.2,1.0);
float line_width = 0.1;
float f = 0.5;
float distance = 3.0;
bool cull_back = true;
//color Preset
vec2 v1 = vec2(-0.5,0.5);
vec2 v2 = vec2(0.5,0.5);
vec2 v3 = vec2(0.5,-0.5);
vec2 v4 = vec2(-0.5,-0.5);
//
vec3 p00 = vec3(0.0,0.866,0.0);
vec3 p01 = vec3(0.707,0.289,0.408);
vec3 p02 = vec3(0.0,-0.289,0.816);
vec3 p03 = vec3(-0.707,0.289,0.408);
vec3 p04 = vec3(0.0,0.289,-0.816);
vec3 p05 = vec3(0.707,-0.289,-0.408);
vec3 p06 = vec3(0.0,-0.866,0.0);
vec3 p07 = vec3(-0.707,-0.289,-0.408);
vec3 p0 = p00;
vec3 p1 = p01;
vec3 p2 = p02;
vec3 p3 = p03;
vec3 p4 = p04;
vec3 p5 = p05;
vec3 p6 = p06;
vec3 p7 = p07;
//verices Preset
vec3 rotateY(vec3 vertex,float angle){
	return vec3(cos(angle)*vertex.x+sin(angle)*vertex.z,vertex.y,-sin(angle)*vertex.x+cos(angle)*vertex.z);
}
void fillTriangle(vec2 vertex0,vec2 vertex1,vec2 vertex2, vec4 color){
	vec2 first = vertex0-position;
	vec2 second = vertex1-position;
	vec2 third = vertex2-position;
	vec3 crossProduct = vec3(cross(vec3(first,0.0),vec3(second,0.0)).z,cross(vec3(second,0.0),vec3(third,0.0)).z,cross(vec3(third,0.0),vec3(first,0.0)).z);
	if((crossProduct.x>0.0&&crossProduct.y>0.0&&crossProduct.z>0.0)||(crossProduct.x<0.0&&crossProduct.y<0.0&&crossProduct.z<0.0)){
		gl_FragColor = color;
	}
}
void drawRectWithFrame(vec2 vertex0,vec2 vertex1,vec2 vertex2,vec2 vertex3,vec4 fillColor,vec4 frameColor,float framePercent){
	if(cull_back&&(cross(vec3((vertex1-vertex0),0),vec3((vertex2-vertex1),0)).z<0.0)){
	}else{
		fillTriangle(vertex0,vertex1,vertex2,frameColor);
		fillTriangle(vertex2,vertex3,vertex0,frameColor);
		vec2 center=vec2((vertex0+vertex1+vertex2+vertex3)/4.0);
		vec2 vertex4 = center+(vertex0-center)*(1.0-framePercent);
		vec2 vertex5 = center+(vertex1-center)*(1.0-framePercent);
		vec2 vertex6 = center+(vertex2-center)*(1.0-framePercent);
		vec2 vertex7 = center+(vertex3-center)*(1.0-framePercent);
		fillTriangle(vertex4,vertex5,vertex6,fillColor);
		fillTriangle(vertex6,vertex7,vertex4,fillColor);
		fillTriangle(vertex5,vertex6,vertex7,fillColor);
		fillTriangle(vertex7,vertex4,vertex5,fillColor);
	}
}
vec2 projectToPlane(vec3 vertex){
	return vec2(vertex.x*f/(-vertex.z+distance),vertex.y*f/(-vertex.z+distance));
}
void rotateCube(void){
	p0 = rotateY(p00,time/1000.0);
	p1 = rotateY(p01,time/1000.0);
	p2 = rotateY(p02,time/1000.0);
	p3 = rotateY(p03,time/1000.0);
	p4 = rotateY(p04,time/1000.0);
	p5 = rotateY(p05,time/1000.0);
	p6 = rotateY(p06,time/1000.0);
	p7 = rotateY(p07,time/1000.0);
}
void drawWhite(void){
	drawRectWithFrame(projectToPlane(p3),projectToPlane(p2),projectToPlane(p1),projectToPlane(p0),surface_color,line_color,line_width);//white
}
void drawRed(void){
	drawRectWithFrame(projectToPlane(p1),projectToPlane(p2),projectToPlane(p6),projectToPlane(p5),surface_color,line_color,line_width);//red
}
void drawBlue(void){
	drawRectWithFrame(projectToPlane(p0),projectToPlane(p1),projectToPlane(p5),projectToPlane(p4),surface_color,line_color,line_width);//blue
}
void drawGreen(void){
	drawRectWithFrame(projectToPlane(p2),projectToPlane(p3),projectToPlane(p7),projectToPlane(p6),surface_color,line_color,line_width);//green
}
void drawOrange(void){
	drawRectWithFrame(projectToPlane(p3),projectToPlane(p0),projectToPlane(p4),projectToPlane(p7),surface_color,line_color,line_width);//orange
}
void drawYellow(){
	drawRectWithFrame(projectToPlane(p4),projectToPlane(p5),projectToPlane(p6),projectToPlane(p7),surface_color,line_color,line_width);//yellow
}
void main(void) 
{ 
	gl_FragColor = background_color;
	rotateCube();
	drawYellow();
	drawOrange();
	drawGreen();
	drawBlue();
	drawRed();
	drawWhite();
} 

					</textarea>
				</div>
				<div class = "button" id = "bottomButton">
					<button id = "tryButton" onclick = "start();">
					Run
					</button>
				</div>
			</div>
		</div>
		<script src = "shaderLab.js"></script>
	</body>
</html>
